<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@font-face {
				font-family: 'icomoon';
				src: url('fonts/icomoon.eot?vl6qtv');
				src: url('fonts/icomoon.eot?vl6qtv#iefix') format('embedded-opentype'),
					url('fonts/icomoon.ttf?vl6qtv') format('truetype'),
					url('fonts/icomoon.woff?vl6qtv') format('woff'),
					url('fonts/icomoon.svg?vl6qtv#icomoon') format('svg');
				font-weight: normal;
				font-style: normal;
				font-display: block;
			}

			div {
				position: relative;
				width: 200px;
				height: 50px;
				border: 1px solid green;
				font-size: 14px;
				text-align: center;
				line-height: 50px;
			}

			div::after {
				position: absolute;
				/* top: 18px; */
				right: 12px;
				font-family: 'icomoon';
				/* content: ''; */
				content: '\e90b';
				color: green;
			}
			/* 可以用伪元素选择器配合字体图标来使用，具体方法用伪元素里面使用字体图标再用定位的方式确定位子 */
			
			/* 字体图标的第二种引入方式,转义字符加代码的方式 */
		</style>
	</head>
	<body>
		<h1>伪元素选择器可以配合字体图标使用</h1>
		<div>厉害厉害真厉害</div>
	</body>
</html>
